<template>
	<view class="page">
		<TabButtonVue :list="titleList" :current="current" @click="changeCurrent"></TabButtonVue>
		<view class="pad-16r ">
			<view class="jiuzhenren">
				<view class="title">
					<view>
						<view class="title-name">就诊人信息</view>
						<view class="center">
							<view class="title-bg"></view>
						</view>
					</view>
				</view>
				<view class="tform">
					<view class="tform-item">
						<view class="value flex">
							<view class="xin">*</view>
							<view>证件类型</view>
						</view>
						<picker @change="bindPickerChangeCertType" :range="listCertType" range-key="label">
							<view class="uni-input"
								:style="{color: form.certTypeLabel === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
								{{form.certTypeLabel || '请选择证件类型'}} &gt;
							</view>
						</picker>
					</view>
					<view class="tform-item">
						<view class="start-center">
							<view class="xin">*</view>
							<view>证件号码</view>
						</view>
						<view class="flex-end center">
							<input type="text" class="text-zjhm" maxlength="18" v-model="form.certId"
								placeholder="请填写就诊人证件号码" @blur="getSexBarth" />
							<view class="btn-zjsb">
								证件识别
							</view>
						</view>
					</view>
					<view class="tform-item">
						<view class="value flex">
							<view class="xin">*</view>
							姓名
						</view>
						<input type="text" v-model="form.patName" placeholder="请输入姓名" />
					</view>
					<view class="tform-item">
						<view class="value flex">
							<view class="xin">*</view>
							性别
						</view>
						<picker @change="bindPickerChangeSex" range-key="label" :value="sex" :range="listSex">
							<view class="uni-input"
								:style="{color: form.patSexLabel === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
								{{form.patSexLabel || '请选择性别'}} &gt;
							</view>
						</picker>
					</view>
					<view class="tform-item">
						<view class="value flex">
							<view class="xin">*</view>
							出生日期
						</view>
						<picker @change="bindPickerChangeBirthday" mode="date">
							<view class="uni-input"
								:style="{color: form.patBirthDate === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
								{{form.patBirthDate || '请选择出生日期'}} &gt;
							</view>
						</picker>
					</view>
					<view class="tform-item">
						<view class="value flex">
							<view class="xin">*</view>
							民族
						</view>
						<picker @change="bindPickerChangeNation" range-key="label" :value="form.nation"
							:range="listNation">
							<view class="uni-input"
								:style="{color: form.nation === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
								{{nationLabel || '请选择民族'}} &gt;
							</view>
						</picker>
					</view>
					<view class="tform-item">
						<view class="value flex">
							<view class="xin">*</view>
							联系地址
						</view>
						<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
							<view class="uni-input"
								:style="{color: form.province === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
								{{regionName || '点击选择省市区'}} &gt;
							</view>
						</pick-regions>
					</view>
					<view class="tform-item">
						<view class="value flex">
							<view class="xin">*</view>
							详细地址
						</view>
						<input type="text" v-model="form.patAddress" placeholder="请输入街道、小区、门牌号等" />
					</view>
					<view class="tform-item">
						<view class="value flex">
							<view class="xin">*</view>
							手机号码
						</view>
						<input type="number" maxlength="11" v-model="form.patPhone" @blur="setGuardianPhone"
							placeholder="请输入手机号" />
					</view>
					<view class="tform-item" style="border: none;">
						<view class="value flex">
							<view class="xin">*</view>
							就诊人关系
						</view>
						<picker @change="bindPickerChangeRelationShip" range-key="label" :value="form.relationShip"
							:range="listRelationShip">
							<view class="uni-input"
								:style="{color: form.relationShip === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
								{{form.relationShip || '请选择就诊人关系'}} &gt;
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view v-if="current==1">
			<view class="pad-16r">
				<view class="jiuzhenren">
					<view class="title">
						<view>
							<view class="title-name">监护人信息</view>
							<view class="center">
								<view class="title-bg"></view>
							</view>
						</view>
					</view>
					<view class="tform">
						<view class="tform-item">
							<view class="value flex">
								<view class="xin">*</view>
								监护人
							</view>
							<input type="text" v-model="form.guardian" placeholder="请输入监护人姓名" />
						</view>
						<view class="tform-item">
							<view class="value flex">
								<view class="xin">*</view>
								<view>监护人证件类型</view>
							</view>
							<picker @change="bindPickerChangeGuardianCertType" :range="listCertType" range-key="label">
								<view class="uni-input"
									:style="{color: form.guardianCreType === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
									{{form.guardianCreTypeLabel || '请选择监护人证件类型'}} &gt;
								</view>
							</picker>
						</view>
						<view class="tform-item flex-between">
							<view class="value flex">
								<view class="xin">*</view>
								<view>监护人证件号码</view>
							</view>
							<input type="text" class="text-zjhm" maxlength="18" v-model="form.guardianCreNo"
								placeholder="请填写监护人证件号码" />
						</view>
						<view class="tform-item" style="border: none;">
							<view class="value flex">
								<view class="xin">*</view>
								监护人手机号码
							</view>
							<input type="number" class="guardian-phone" maxlength="11" v-model="form.guardianPhone"
								placeholder="请输入手机号" />
						</view>
					</view>
				</view>
			</view>
			<!-- <Button content="监护人识别" bg="blue" width="50%" @click="renlianshibie"></Button> -->
		</view>
		<ButtonVue content="确认建档" @click="sub"></ButtonVue>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import TabButtonVue from "../../components/Tabs/TabButton.vue"
	import PickRegions from '@/components/pick-regions/pick-regions.vue'
	import {
		getYearsBetweenDates
	} from "../../utils/assist.js"
	import {
		address
	} from "../../utils/listAddress.js"
	import {
		listCertType
	} from "../../utils/listCertType.js"
	import {
		listNation
	} from "../../utils/listNation.js"
	import {
		listSex
	} from "../../utils/listSex.js"
	import {
		listRelationShip
	} from "../../utils/listRelationShip.js"
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		addRecord
	} from '@/api/patientCard.js'
	import {
		phoneReg,
		cardReg,
		idCard
	} from '@/common/js/reg.js'
	export default {
		components: {
			PickRegions,
			TabButtonVue
		},
		data() {
			return {
				listNation,
				listSex,
				listAddress: address,
				listRelationShip: listRelationShip,
				form: {
					cardType: 0,
					patType: 1,
				},
				sex: 1,
				listCertType,
				showGuardian: false,
				titleList: [{
					"name": "成人",
					"patType": 1
				}, {
					"name": "儿童",
					"patType": 2
				}],
				current: 0,
				defaultRegionCode: '510107',
				region: [],
				nationLabel: "",

			}
		},
		computed: {
			...mapGetters(['userId', 'userInfo', 'userList', "currentHospitalInfo"]),
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join('-')
			},
			regionNameKid() {
				// 转为字符串
				return this.region.map(item => item.name).join('-')
			}
		},
		mounted() {
			this.$set(this.form, 'certType', listCertType[0].value)
			this.$set(this.form, 'certTypeLabel', listCertType[0].label)
			this.$set(this.form, 'certTypeName', listCertType[0].label)
			this.form.patType = this.titleList[this.current].patType
			this.nationLabel = listNation[0].label;
			this.$set(this.form, 'nation', listNation[0].value)
			if (this.currentHospitalInfo) {
				this.form.campusCode = this.currentHospitalInfo.code
				this.form.campusName = this.currentHospitalInfo.name
				this.form.campusImage = this.currentHospitalInfo.icon
			}
			this.form.relationShip = "本人"
		},
		methods: {
			...mapActions(['setUserList']),
			renlianshibie() {
				uni.navigateTo({
					url: '/pages/Login/Face'
				})
			},
			setGuardianPhone() {
				// 默认输入儿童手机号时，监护人手机号和儿童手机号保持一致，可单独修改监护人手机号
				this.form.guardianPhone = this.form.patPhone
				console.log(this.form.guardianPhone)
			},
			changeCurrent(index) {
				this.current = index;
				this.form.patType = this.titleList[index].patType
				// 判断就诊人关系,根据身份证年龄判断
				if (index == 0) {
					this.form.relationShip = "本人"
				} else {
					this.form.relationShip = ""
				}
			},
			back() {
				uni.removeStorageSync('heathRecords')
				uni.navigateBack(1)
			},
			// 通过身份证得到性别和出生日期
			getSexBarth() {
				console.log(this.form)
				if (this.form.certType == "01") {
					if (!this.form.certId) return
					let userCard = this.form.certId
					if (!cardReg.test(userCard)) {
						this.$u.toast('身份证格式不正确')
						return;
					}
					// 判断当前身份证是否已经创建，如果创建，则提示不能再次创建
					// 通过当前身份证和userList里面的身份证进行比较即可
					let certIdIsHave = false; //身份证是否已经存在
					for (let i = 0; i < this.userList.length; i++) {
						if (userCard == this.userList[i].certId) {
							certIdIsHave = true;
							break;
						}
					}
					if (certIdIsHave) {
						this.$u.toast('该身份证已创建了就诊卡')
						return;
					}


					// 511611198702222322
					// this.showGuardian = new Date().getFullYear() - userCard.substring(6, 10) 
					// console.log(listSex[parseInt(userCard.substr(16, 1)) % 2 + 1].value)
					let year = userCard.substring(6, 10);
					let month = userCard.substring(11, 12);
					let day = userCard.substring(13, 14);
					let bir = new Date(year + "-" + month + "-" + day);
					let age = getYearsBetweenDates(new Date(), new Date(bir));
					console.log(bir, age, this.form.cardType)
					if (age < 6 && this.current == 0) {
						this.$u.toast('请创建儿童就诊卡')
						return;
					}
					if (age >= 6 && this.current == 1) {
						this.$u.toast('请创建成人就诊卡')
						return;
					}
					this.$set(this.form, 'patBirthDate', userCard.substring(6, 10) + "-" + userCard.substring(10, 12) +
						"-" +
						userCard.substring(12, 14))
					this.showGuardian = new Date().getFullYear() - userCard.substring(6, 10) <= 6
					this.form.patType = this.showGuardian ? '2' : '1'
					this.$set(this.form, 'patAge', age)
					this.$set(this.form, 'patSex', parseInt(userCard.substr(16, 1)) % 2 == 0 ? '2' : '1')
					this.$set(this.form, 'patSexLabel', parseInt(userCard.substr(16, 1)) % 2 == 0 ? '女性' : '男性')

				}
			},
			bindPickerChangeCertType(e) {
				this.$set(this.form, 'certType', listCertType[e.detail.value].value)
				this.$set(this.form, 'certTypeLabel', listCertType[e.detail.value].label)
				this.$set(this.form, 'certTypeName', listCertType[e.detail.value].label)
			},
			bindPickerChangeRelationShip(e) {
				this.$set(this.form, 'relationShip', listRelationShip[e.detail.value])
			},
			bindPickerChangeGuardianCertType(e) {
				this.$set(this.form, 'guardianCreType', listCertType[e.detail.value].value)
				this.$set(this.form, 'guardianCreTypeLabel', listCertType[e.detail.value].label)
			},
			bindPickerChangeSex(e) {
				this.$set(this.form, 'patSex', parseInt(userCard.substr(16, 1)) % 2 == 0 ? '2' : '1')
				this.$set(this.form, 'patSexLabel', parseInt(userCard.substr(16, 1)) % 2 == 0 ? '女性' : '男性')
			},
			bindPickerChangeBirthday(e) {
				this.$set(this.form, 'patBirthDate', e.detail.value)
			},
			bindPickerChangeNation(e) {
				this.nationLabel = listNation[e.detail.value].label;
				this.$set(this.form, 'nation', listNation[e.detail.value].label)
			},
			handleGetRegion(region) {
				this.region = region
				this.$set(this.form, 'province', this.region[0].name)
				this.$set(this.form, 'city', this.region[1].name)
				this.$set(this.form, 'district', this.region[2].name)
			},
			sub() {
				let userCard = this.form.certId
				console.log(userCard)
				if (this.form.certType == "01") {
					if (!cardReg.test(userCard)) {
						this.$u.toast('身份证格式不正确')
						return;
					}
					let year = userCard.substring(6, 10);
					let month = userCard.substring(11, 12);
					let day = userCard.substring(13, 14);
					let bir = new Date(year + "-" + month + "-" + day);
					let age = getYearsBetweenDates(new Date(), new Date(bir));
					if (age < 6 && this.current == 0) {
						this.$u.toast('该身份证为儿童请创建儿童就诊卡')
						return;
					}
					if (age >= 6 && this.current == 1) {
						this.$u.toast('该身份证为成年人请创建成人就诊卡')
						return;
					}
				}

				// 判断当前身份证是否已经创建，如果创建，则提示不能再次创建
				// 通过当前身份证和userList里面的身份证进行比较即可
				let certIdIsHave = false; //身份证是否已经存在

				for (let i = 0; i < this.userList.length; i++) {
					if (userCard == this.userList[i].certId) {
						certIdIsHave = true;
						break;
					}
				}
				if (certIdIsHave) {
					this.$u.toast('该身份证已创建了就诊卡')
					return;
				}

				if (!this.form.certType) return this.$u.toast('请选择证件类型')
				if (!this.form.certId) return this.$u.toast('请输入就诊人证件号码')
				if (!this.form.patName) return this.$u.toast('请输入姓名')
				if (!this.form.patSex) return this.$u.toast('请选择性别')
				if (!this.form.patBirthDate) return this.$u.toast('请选择出生日期')
				if (!this.form.nation) return this.$u.toast('请选择民族')
				if (!this.form.province) return this.$u.toast('请选择省')
				if (!this.form.city) return this.$u.toast('请选择市')
				if (!this.form.district) return this.$u.toast('请选择区')
				if (!this.form.patAddress) return this.$u.toast('请输入详细地址')

				if (!phoneReg.test(this.form.patPhone)) {
					this.$u.toast('请填写正确的手机号码');
					return
				}
				if (this.current == 1) {
					if (!this.form.guardian) return this.$u.toast('请输入监护人姓名')
					if (!this.form.guardianCreType) return this.$u.toast('请输入监护人证件类型')
					if (!this.form.guardianCreNo) return this.$u.toast('请输入监护人身份证号码')
				}

				uni.showLoading({
					title: "正在创建就诊卡"
				})
				const data = {
					...this.form,
					openId: this.userId,
					...uni.getStorageSync('heathRecords')
				}
				console.log(data)
				addRecord(data).then(res => {
					console.log(res)
					if (res.result.status == 'F') {
						this.$u.toast(res.result.msg);
					} else {
						this.setUserList(res.result)
						uni.removeStorageSync('heathRecords')
						uni.navigateBack(1)
					}

				}).finally(() => {
					uni.hideLoading()
				})
			},
			toRecords() {
				uni.navigateTo({
					url: './records'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.guardian-phone {
		width: 150px;
	}

	.jiuzhenren {
		background-color: rgb(245, 254, 255);
		padding: 16rpx;
		border-radius: 16rpx;
	}

	.title {
		display: flex;
		justify-content: flex-start;
	}

	.title-name {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 16px;
		color: #333333;
		line-height: 15px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.title-bg {
		width: 32px;
		height: 6px;
		background: #41CFE6;
		border-radius: 0px 0px 0px 0px;
	}

	uni-input {
		text-align: right;

		.uni-input-placeholder {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28upx;
			color: rgba(0, 0, 0, 0.24);
		}
	}

	.btn-box {
		display: flex;
		justify-content: space-around;
		align-items: center;


		.btn {
			width: 80%;
			height: 64upx;
			background: $theme-color;
			border-radius: 64upx;
			text-align: center;
			line-height: 64upx;
			color: #FFF;
			background-color: rgb(112, 222, 230);

			&:nth-child(0) {
				background-color: transparent;
				border: 1px solid $theme-color;
				color: $theme-color;
			}
		}
	}

	.img {
		width: 66upx;
		height: 66upx;
		margin-right: 24upx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex-between {
		display: flex;
		justify-content: space-between;
	}

	.xin {
		color: red;
		text-align: center;
		font-size: 20px;
		height: 20px;
		padding: 0 5px;
	}

	.color-gray {
		color: gray
	}

	.text-zjhm {
		width: 70%;
	}

	.btn-zjsb {
		width: 53px;
		height: 15px;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 13px;
		color: #2E6D78;
		line-height: 15px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
</style>